<template>
   
        <div class="item-p">
            <chart
            :options="line"
            :init-options="initOptions"
            ref="bar"
            autoresize
            />
        </div>
   
</template>
<script>
import ECharts from '@/components/echarts/ECharts.vue'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/tooltip'
export default {
    components: {
        chart: ECharts
    },
   props:{
        //[
	//{legend:"推荐量",color:"#34243",series:[{name:"1",value:123},{name:"2",value:12321}]},
	//{legend:"阅读量",color:"#34243",series:[{name:"1",value:123},{name:"2",value:12321}]},
    //]
        data: {
            type:Array,
            default:[]
        },
        title: {
             type:String,
            default:''
        }
    },
    watch:{
        data(newVal,oldVue){
           this.init()
        }
    },
    data(){
        return {
           
             line:{
                title: {
                    text: this.title
                },
                tooltip: {
                    trigger: 'axis',
                    show: true
                },
                grid: {
                    top: '8%',
                    left: '0%',
                    right: '6%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: '0.2rem'
                    }
                },
                yAxis: {
                    type: 'value',
                    show: true,
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: '0.2rem'
                    }
                },
                series: [
                    {
                        type:'line',
                        data:[],
                        areaStyle:{
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#2FADF5' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        lineStyle: {
                            color: '#001ED8'
                        },
                        itemStyle: {
                            borderColor: '#FF973A'
                        }
                    }
                   
                ]
            },
            initOptions: {
                renderer: 'canvas'
            },
        }
    },
    methods: {
        init() {
            var xAxisData = []
            var yAxisData = []
            var series = []
            for(var item of this.data){
               xAxisData.push(item.name)
               yAxisData.push(item.value)
           }
           this.line.series[0].data = yAxisData
           this.line.xAxis.data = xAxisData
        }
    },
    mounted(){
        this.init()
    }
}
</script>
<style scoped>
.item-p{
  width: 100%;
    height: 100%;
}
</style>